<template>
  <el-dialog title="选择组合套餐" :visible.sync="dialogVisible">
    <el-form label-position="left" label-width="120px" style="width: 100%; padding-left: 20px;">
      <el-form-item label="选择组合套餐：" v-if="count !== 1">
        <div class="el-tag-box">
          <el-tag v-for="(item, index) of itemsChecked" :key="item.comboId" :closable="true" @close="delItem(index)">{{item.name}}</el-tag>
        </div>
      </el-form-item>
    </el-form>
    <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="120px" style="width: 100%">
      <input type="text" style="display: none"/><!--form input placeholder-->
      <el-row :gutter="50">
        <el-col :xs="24">
          <el-form-item label="组合套餐名称：" prop="seriesName">
            <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="按组合套餐名称搜索" maxlength="50" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="" class="btn-item">
        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
      <el-table-column align="center" width="50">
        <template slot-scope="scope">
          <label class="input-radio" v-if="count === 1">
            <input type="radio" :value="{comboId: scope.row.comboId, name: scope.row.name}" v-model="itemRadio"/>
            <span></span>
          </label>
          <label class="input-checkbox" v-else>
            <input type="checkbox" :value="{comboId: scope.row.comboId, name: scope.row.name}" v-model="itemsChecked"/>
            <span></span>
          </label>
        </template>
      </el-table-column>
      <el-table-column align="center" label="组合ID" prop="comboId"></el-table-column>
      <el-table-column align="center" label="组合名称" prop="name"></el-table-column>
      <el-table-column align="center" label="是否上架" width="120">
        <template slot-scope="scope">
          <span v-text="scope.row.upshelf === 1 ? '是' : '否'"></span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" v-if="listTotal > 0">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex" :page-size="listQuery.pageSize" :total="listTotal" layout="total, prev, pager, next, jumper"></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnDisabled" @click="ackChoose">确定</el-button>
      <el-button @click="cancelChoose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name: 'comboPackage',
    props: {
      count: {
        type: Number,
        default: -1
      },
      check: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data(){
      return {
        dialogVisible: true,
        itemRadio: {},
        itemsChecked: [],
        listQuery: {
          // pageIndex: 1,
          // pageSize: 10,
          isPage: 1,
          name: '',
          comboId: '',
          pageIndex: 1,
          PageSize: 20,
        },
        listLoading: false,
        list: [],
        listTotal: 0,
        btnDisabled: false
      }
    },
    created() {
      this.getList();
      if (this.count === 1 && this.check.length > 0) {
        this.itemRadio = this.check[0];
      }
    },
    methods: {
      // 获取列表
      getList() {
        this.listLoading = true;
        this.request({
          url: '/bsnl-product/combo/package/list',
          method: 'get',
          params: this.listQuery
        }).then(({data, totalCount}) => {
          this.list = data || [];
          this.listTotal = totalCount;
          this.listLoading = false;
        }).catch(err => {
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      delItem(index){
        this.itemsChecked.splice(index, 1);
      },
      search(){
        this.listQuery.pageIndex = 1;
        this.getList();
      },
      clickRow({comboId, name}){
        if (this.count === 1) {
          this.itemRadio = {
            comboId,
            name
          };
          return false;
        }
        let index = this.itemsChecked.findIndex(item => item.comboId === comboId);
        if (index < 0) {
          this.itemsChecked.push({
            comboId,
            name

          });
        } else {
          this.itemsChecked.splice(index, 1);
        }
      },
      handleCurrentChange(val){
        this.listQuery.pageIndex = val;
        this.getList();
      },
      ackChoose(){
        if (this.count === 1 && this.itemRadio.comboId){
          this.itemsChecked = [this.itemRadio]
        }
        if(this.itemsChecked.length < 1){
          return this.$message.error('请选择活动');
        }
        if(this.count > 0 && this.itemsChecked.length > this.count){
          return this.$message.error(`最多选择${this.count}个活动`);
        }
        this.$emit('choose', this.itemsChecked);
        console.log(this.itemsChecked)
        this.dialogVisible = false;
        document.body.removeChild(this.$el);
      },
      cancelChoose(){
        this.dialogVisible = false;
        document.body.removeChild(this.$el);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pagination-container {
    /deep/ .el-pagination__editor.el-input {
      width: auto!important;
    }
  }
</style>
